.slider-container {
  width: px(300);
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  .back-bar {
    height: px(4);
    border-radius: 2px;
    background-color: #e5e5e5;
    position: relative;
    .selected-bar {
      position: absolute;
      height: px(4);
      border-radius: px(2);
      background-color: $clr-main;
    }
    .pointer {
      position: absolute;
      top: px(-24);
      width: px(48);
      height: px(48);
      cursor: col-resize;
      opacity: 1;
      z-index: 2;
      &.last-active {
        z-index: 3;
      }
      &:after {
        content: "";
        display: block;
        position: absolute;
        top: px(1);
        bottom: px(1);
        left: px(10);
        margin: auto;
        width: px(24);
        height: px(24);
        background-image: linear-gradient(-180deg, #FFEB00 0%, #FECC00 100%);
        box-shadow: 0 2px 4px 0 rgba(255,216,0,0.30);
        border-radius: 100%;
      }
    }
    .pointer-label {
      position: absolute;
      bottom: px(-30);
      white-space: nowrap;
      height: px(12);
      line-height: px(12);
      font-size: px(14);
      color: $clr-g3;
    }
  }
  .clickable-dummy {
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .scale {
    top: px(5);
    position: relative;
  }
}